<template>
    <div class="p-2 text-gray-500">热门专辑</div>
    <el-row style="min-height:500px;width:100%;">
        <el-col :span="4" class="p-3 mb-3" v-for="(item, index) in hotAlbum">
            <div style="position:relative;height:160px;">
                <el-image :src="baseUrl + item.image" class=" rounded-xl" style="width:100%;height:160px;" />
                <div class="rounded-xl bg-blue-500  text-white text-xs pl-3 pr-3 pt-1 pb-1"
                    style="position: absolute;top:5px;left:5px;">{{ item.desc }}</div>
            </div>
            <div class="pt-2 pb-1 text-gray-700">{{ item.title }}</div>
            <div class=" text-gray-500 text-xs">{{ item.user.name }}</div>
        </el-col>

    </el-row>
</template>
<script setup>
import { indexHotAlbum } from "@/http/api";
import { extractIdentifiers } from "@vue/compiler-core";
import { ref, computed, onMounted, watch } from "vue";
const baseUrl = import.meta.env.VITE_API_URL;

const hotAlbum = ref([]);
onMounted(() => {
    gethothotAlbum();
});

const gethothotAlbum = async () => {
    const { data } = await indexHotAlbum();
    hotAlbum.value = data.data;
}

</script>
<style scoped>
.container {
    width: 1440px;
}

.pointer {
    cursor: pointer;
}
</style>